<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/layui.css">
    <!-- <link rel="stylesheet" href="./css/cropper.css"> -->

    <style>
        body {
            background-color: #ededed;
        }

        #btkuang {
            width: 60%;
            display: inline-block;
        }

        #readCount {
            width: 100px;
            display: inline-block;
            flex: 2;
            text-align: center;
            padding: 0;
        }

        #shuliang {
            display: flex;
            width: 300px;
        }

        #shuliang #jia {
            flex: 1;
        }

        #shuliang #jian {
            flex: 1;
        }

        #youbian {
            margin-left: 300px;
            width: 300px;
        }

        #creatTime {
            display: inline-block;
            width: 200px;
        }

        .shoucang {
            width: 500px;
        }

        .juzhong {
            margin: 0 auto;
        }

        .layui-form-item {
            margin-top: 30px;
        }

        .layui-tab-content,
        .layui-tab-title {
            background-color: #fff;
        }

        .layui-tab-brief {
            padding: 10px;
        }

        .sananniu {
            margin-left: 300px;
        }

        .tupian {
            display: inline-block;
            width: 150px;
            height: 150px;
        }

        .tupian img {
            width: 100%;
            height: 100%;
        }

        #btnChooseImage {
            position: absolute;
            top: 65px;
            left: -82px;
        }
    </style>
</head>

<body>
    <!-- tab栏切换 -->
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">基础信息</li>
            <li>SEO信息</li>
            <li>文章内容</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!-- 第一页 -->
                <!-- 表单 -->
                <form class="layui-form juzhong" action="" lay-filter="form" id="formedit">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input" id="btkuang">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-inline">
                            <input type="text" name="author" required lay-verify="required" placeholder="请输入作者"
                                autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" id="youbian">
                            <select name="cate_id">
                                <option value="">所有分类</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <!-- 阅读次数 -->
                        <div class="layui-input-inline" id="shuliang">
                            <label class="layui-form-label">阅读次数</label>
                            <button type="button" class="layui-btn" id="jian">-</button>
                            <input type="text" name="click" required lay-verify="required" class="layui-input"
                                placeholder="1" id="readCount">
                            <button type="button" class="layui-btn" id="jia">+</button>
                        </div>
                        <!-- 创建时间 -->
                        <div class="layui-input-inline" id="youbian">
                            <input type="text" name="create_date" class="layui-input" id="creatTime" placeholder="创建时间">
                        </div>
                    </div>



                    <!-- 开关 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否推荐</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="ishot" lay-skin="switch">
                        </div>
                        <label class="layui-form-label">是否置顶</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="istop" lay-skin="switch">
                        </div>
                    </div>
                    <!-- 收藏数量 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">收藏数量</label>
                        <div class="layui-input-block  shoucang">
                            <input type="text" name="lovenum" required lay-verify="required" autocomplete="off"
                                class="layui-input" id="btkuang">
                        </div>
                    </div>
                    <!-- 上传图片 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章缩略图</label>
                        <div class="layui-input-block  shoucang">
                            <!-- <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input" id="btkuang"> -->
                            <button class="layui-btn" id="btnChooseImage">上传</button>



                            <div class="tupian">
                                <img src="./upload/images/tom.jpg" name="pic" alt="">
                            </div>





                            <input type="file" id="file" style="display: none;"
                                accept="image/jpeg,image/png,image/bmp,image/gif" />
                        </div>
                    </div>
                    <!-- 复选框 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章标签</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="" title="搞笑" lay-skin="primary" checked>
                            <input type="checkbox" name="" title="我的" lay-skin="primary">
                            <input type="checkbox" name="" title="浴火" lay-skin="primary">
                            <input type="checkbox" name="" title="二次元" lay-skin="primary">
                            <input type="checkbox" name="" title="摄影" lay-skin="primary">
                            <input type="checkbox" name="" title="汉服" lay-skin="primary">
                            <input type="checkbox" name="" title="文字控" lay-skin="primary">
                            <input type="checkbox" name="" title="诗歌" lay-skin="primary">
                            <input type="checkbox" name="" title="手机控" lay-skin="primary">
                            <input type="checkbox" name="" title="懒癌患者" lay-skin="primary">
                            <input type="checkbox" name="" title="资深吃货" lay-skin="primary">
                            <input type="checkbox" name="" title="动漫" lay-skin="primary">
                            <input type="checkbox" name="" title="娱乐" lay-skin="primary">
                            <input type="checkbox" name="" title="科技" lay-skin="primary">
                            <input type="checkbox" name="" title="123" lay-skin="primary">
                            <input type="checkbox" name="" title="qwq" lay-skin="primary">
                        </div>
                    </div>
                    <!-- 三按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block sananniu">
                            <button class="layui-btn">立即发布</button>
                            <button class="layui-btn">保存草稿</button>
                            <button class="layui-btn return">返回列表</button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 第二页 -->
            <div class="layui-tab-item">
                <form class="layui-form" action="" id="formSEO">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">SEO关键字</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" name="keywords" class="layui-textarea"
                                name="desc1"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">SEO的描述</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" name="description" class="layui-textarea"
                                name="desc2"></textarea>
                        </div>
                    </div>
                    <!-- 三按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block sananniu">
                            <button class="layui-btn">立即发布</button>
                            <button class="layui-btn">保存草稿</button>
                            <button class="layui-btn return">返回列表</button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 第三页 -->
            <div class="layui-tab-item">
                <div id="contentBox"></div>
                <!-- 三按钮 -->
                <div class="layui-form-item">
                    <div class="layui-input-block sananniu">
                        <button class="layui-btn">立即发布</button>
                        <button class="layui-btn">保存草稿</button>
                        <button class="layui-btn return">返回列表</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./lib/layui/layui.all.js" charset="utf-8"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/ajaxBase.js"></script>
    <script src="./js/wangEditor.js"></script>


    <script>
        const element = layui.element;
        const laydate = layui.laydate
        const form = layui.form


        layui.use('form', function () {
            //方法提交
            $('#btnChooseImage').on('click', function (data) {
                $('#file').click()
                return false
            })
        })
        // 时间表单框js
        layui.use('laydate', function () {
            //执行一个laydate实例
            laydate.render({
                elem: '#creatTime' //指定元素
            });
        })
        layui.use('element', function () {
            //一些事件
            element.on('tab(demo)', function (data) {
                console.log(data);
            });
        });


        $('#jia').on('click', function () {
            let n = $(this).siblings('#readCount').val()
            n++
            $(this).siblings('#readCount').val(n)
        })
        $('#jian').on('click', function () {
            let n = $(this).siblings('#readCount').val()
            // console.log(n)
            if (n == 1) {
                return false
            }
            n--
            // console.log(n)
            $(this).siblings('#readCount').val(n)
        })



        const classArr = [
            {
                shuzi: 3,
                leibie: '时政'
            }, {
                shuzi: 4,
                leibie: '图片'
            },
            {
                shuzi: 5,
                leibie: '娱乐'
            },
            {
                shuzi: 6,
                leibie: '汽车'
            },
            {
                shuzi: 7,
                leibie: '段子'
            },
            {
                shuzi: 8,
                leibie: '科技'
            },
            {
                shuzi: 9,
                leibie: '时尚'
            },
        ]
        // ========================时间戳转为时间=======================
        function getnTime(xin) {
            let date = new Date(xin)
            Y = date.getFullYear() + '-'
            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            D = date.getDate() + ''
            return Y + M + D
        }
        axios.get('/ydd_article/list').then(res => {
            // console.log(res.data.data.data)
            const newArr = classArr.map(item => {
                return `
        <option value="${item.shuzi}">${item.leibie}</option>
        `
            }).join('')
            // console.log(newArr)
            $('[name=cate_id]').append(newArr)
            form.render()

            // ======================发送ajax请求，获取对应文章详情================
            axios.get('/ydd_article/rowInfo', {
                params: {
                    id: idhao,
                }
            }).then(res => {
                console.log(res)

                // form.val('form', res.data.data)
                form.val("form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "author": res.data.data.author // "name": "value"
                    , "cateid": res.data.data.cateid
                    , "click": res.data.data.click
                    , "create_date": getnTime(res.data.data.create_date)
                    , "description": res.data.data.description
                    , "id": res.data.data.id,
                    'ishot': res.data.data.ishot,
                    'istop': res.data.data.istop,
                    'keywords': res.data.data.keywords,
                    'lovenum': res.data.data.lovenum,
                    'pic': res.data.data.pic,
                    'status': res.data.data.status,
                    'tags': res.data.data.tags,
                    'title': res.data.data.title,
                    'update_date': res.data.data.update_date,
                    'user_id': res.data.data.user_id,

                });
                editor.txt.html(res.data.data.content)

                let imgSrc = "http://124.223.14.236:8060/" + res.data.data.pic
                $('img').attr('src', imgSrc)
            })
        })
        // ====================处理id================
        let idhao = location.search.split('?id=')[1]

        // =====================初始化富文本编辑器===================
        const E = window.wangEditor
        const editor = new E('#contentBox')
        editor.create()



        let newImgURL = ''
        let file = ''
        let pic = ''
        $('#file').on('change', function (e) {
            e.preventDefault()
            file = this.files[0]
            const fd = new FormData()
            fd.append('file', file)
            axios({
                method: 'post',
                url: '/common/upload?type=images',
                data: fd,
            }).then(res => {
                console.log(res.data.data.savePath)
                pic = res.data.data.savePath
                // $('img').attr('src', 'http://124.223.14.236:8060/' + saveImg)
            })
            // console.log('/upload/images/' + file.name)
            // console.log(file.name)
            newImgURL = URL.createObjectURL(file)
            // console.log(newSrc)
            // console.log('/upload/images/' + file.name);
            $('img').attr('src', newImgURL)

            // axios.defaults.headers["Content-Type"] = "multipart/form-data";
        })
        // ====================编辑========================
        $('#formedit').on('submit', function (e) {
            e.preventDefault()





            let leibieid
            if ($('.layui-select-title input').val() === '时政') {
                leibieid = 3
            } else if ($('.layui-select-title input').val() === '图片') {
                leibieid = 4
            } else if ($('.layui-select-title input').val() === '娱乐') {
                leibieid = 5
            } else if ($('.layui-select-title input').val() === '汽车') {
                leibieid = 6
            } else if ($('.layui-select-title input').val() === '段子') {
                leibieid = 7
            } else if ($('.layui-select-title input').val() === '科技') {
                leibieid = 8
            } else if ($('.layui-select-title input').val() === '时尚') {
                leibieid = 9
            } else {
                leibieid = null
            }

            // let data = {
            //     author: $('[name=author]').val(),
            //     cateid: leibieid,
            //     click: $('[name=click]').val(),
            //     content: editor.txt.html(),
            //     create_date: Date.parse($('#creatTime').val()),
            //     description: $('[name=description]').val(),
            //     ishot: $('[name=ishot]:checked').length,
            //     istop: $('[name=istop]:checked').length,
            //     keywords: $('[name=keywords]').val(),
            //     lovenum: $('[name=lovenum]').val(),
            //     // pic: 'http://124.223.14.236:8060/' + saveImg,
            //     // pic: 'upload/images/20230319/1679156949062.jpg',
            //     status: '2',
            //     tags: '1',
            //     title: $('[name=title]').val(),
            //     id: idhao,
            // }
            // console.log(data)
            let fd = new FormData()
            fd.append('author', $('[name=author]').val())
            fd.append('cateid', leibieid)
            fd.append('click', $('[name=click]').val())
            fd.append('content', editor.txt.html())
            fd.append('create_date', Date.parse($('#creatTime').val()))
            fd.append('description', $('[name=description]').val())
            fd.append('ishot', $('[name=ishot]:checked').length)
            fd.append('istop', $('[name=istop]:checked').length)
            fd.append('keywords', $('[name=keywords]').val())
            fd.append('lovenum', $('[name=lovenum]').val())
            fd.append('pic', pic)
            fd.append('status', 2)
            fd.append('tags', '1')
            fd.append('title', $('[name=title]').val())
            fd.append('id', idhao)
            fd.forEach((k, v) => {
                console.log(v, k);
            })
            axios({
                method: 'post',
                url: '/ydd_article/update',
                data: fd,
            }).then(res => {
                console.log(res)
                location.href = './article.html'
            })
        })


    </script>
</body>

</html>